<template>
  <view class="wechat-quick-access" v-if="show">
    <view class="quick-access-btn" @tap="showQuickMenu">
      <uni-icons type="weixin" size="20" color="#fff"></uni-icons>
    </view>
    
    <!-- 快速菜单 -->
    <view class="quick-menu" v-if="menuVisible" @tap="hideQuickMenu">
      <view class="menu-content" @tap.stop>
        <view class="menu-item" @tap="goToWechatTest">
          <uni-icons type="weixin" size="18" color="#07C160"></uni-icons>
          <text>微信授权测试</text>
        </view>
        <view class="menu-item" @tap="goToLogin">
          <uni-icons type="person" size="18" color="#667eea"></uni-icons>
          <text>登录页面</text>
        </view>
        <view class="menu-item" @tap="wakeUpWechat">
          <uni-icons type="wifi" size="18" color="#FF9500"></uni-icons>
          <text>微信唤醒</text>
        </view>
        <view class="menu-item" @tap="showWechatInfo">
          <uni-icons type="info" size="18" color="#FF9500"></uni-icons>
          <text>微信信息</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import wechatAuth from '@/utils/wechat'
import { wakeUpWechat, smartWakeUpWechat } from '@/utils/wechat/wechat-wakeup'

export default {
  name: 'WechatAuthQuickAccess',
  props: {
    // 是否显示快速访问按钮
    show: {
      type: Boolean,
      default: true
    },
    // 按钮位置
    position: {
      type: String,
      default: 'bottom-right', // bottom-right, bottom-left, top-right, top-left
      validator: value => ['bottom-right', 'bottom-left', 'top-right', 'top-left'].includes(value)
    }
  },
  
  data() {
    return {
      menuVisible: false
    }
  },
  
  methods: {
    // 显示快速菜单
    showQuickMenu() {
      this.menuVisible = true
      
      // 3秒后自动隐藏
      setTimeout(() => {
        this.hideQuickMenu()
      }, 3000)
    },
    
    // 隐藏快速菜单
    hideQuickMenu() {
      this.menuVisible = false
    },
    
    // 跳转到微信授权测试页面
    goToWechatTest() {
      this.hideQuickMenu()
      uni.navigateTo({
        url: '/pages/wechat-test/index'
      })
    },
    
    // 跳转到登录页面
    goToLogin() {
      this.hideQuickMenu()
      uni.navigateTo({
        url: '/pages/login/index'
      })
    },
    
    // 微信唤醒
    async wakeUpWechat() {
      this.hideQuickMenu()
      
      try {
        uni.showLoading({
          title: '唤醒微信中...'
        })
        
        const result = await smartWakeUpWechat({
          maxRetries: 2,
          retryDelay: 500,
          showLoading: false
        })
        
        uni.hideLoading()
        
        if (result.isSuccess()) {
          uni.showToast({
            title: '微信唤醒成功',
            icon: 'success'
          })
        } else {
          uni.showToast({
            title: result.message || '微信唤醒失败',
            icon: 'none'
          })
        }
      } catch (error) {
        uni.hideLoading()
        uni.showToast({
          title: error.message || '微信唤醒失败',
          icon: 'none'
        })
      }
    },
    
    // 显示微信信息
    showWechatInfo() {
      this.hideQuickMenu()
      
      const status = wechatAuth.checkLoginStatus()
      const userData = wechatAuth.getCurrentUserInfo()
      
      let content = ''
      if (status.isLoggedIn) {
        content = `登录状态：已登录\n`
        if (userData.wechatInfo) {
          content += `微信昵称：${userData.wechatInfo.nickname || '未知'}\n`
          content += `微信头像：${userData.wechatInfo.avatar ? '已设置' : '未设置'}\n`
          content += `OpenID：${userData.wechatInfo.openid || '未知'}`
        }
      } else {
        content = '登录状态：未登录\n请先进行微信授权登录'
      }
      
      uni.showModal({
        title: '微信信息',
        content: content,
        showCancel: false,
        confirmText: '确定'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.wechat-quick-access {
  position: fixed;
  z-index: 9999;
  
  &.bottom-right {
    bottom: 120rpx;
    right: 30rpx;
  }
  
  &.bottom-left {
    bottom: 120rpx;
    left: 30rpx;
  }
  
  &.top-right {
    top: 120rpx;
    right: 30rpx;
  }
  
  &.top-left {
    top: 120rpx;
    left: 30rpx;
  }
}

.quick-access-btn {
  width: 80rpx;
  height: 80rpx;
  background: linear-gradient(135deg, #07C160, #06AD56);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 20rpx rgba(7, 193, 96, 0.3);
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.9);
  }
}

.quick-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
}

.menu-content {
  position: absolute;
  bottom: 220rpx;
  right: 30rpx;
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.2);
  min-width: 200rpx;
  
  &::after {
    content: '';
    position: absolute;
    bottom: -10rpx;
    right: 30rpx;
    width: 0;
    height: 0;
    border-left: 10rpx solid transparent;
    border-right: 10rpx solid transparent;
    border-top: 10rpx solid #fff;
  }
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-radius: 8rpx;
  transition: background-color 0.3s ease;
  
  &:active {
    background: #f5f5f5;
  }
  
  text {
    margin-left: 16rpx;
    font-size: 28rpx;
    color: #333;
  }
}
</style> 